<template>
  <div class="app-container">
    <!--    条件-->
    <el-form v-show="showSearch" ref="searchForm" :inline="true" :model="formSuggests"  class="demo-form-inline">
      <el-form-item label="类型" >
        <el-select v-model="value" placeholder="请选择类型（投诉，建议）" size="mini" >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div   id="main" style="width: 400px; height: 200px"/>
      </el-form-item>
      <el-form-item size="mini">
        <el-button
          type="primary"
          icon="el-icon-search"
          style="margin-top: 5px;margin-left: 10px"
          @click="loadSuggests(current, pageSize, zyComplaintSuggest)"
        >查询
        </el-button>
        <el-button icon="el-icon-refresh" @click="resetForm()">重置</el-button>


      </el-form-item>

    </el-form>






    <el-row :gutter="10" class="mb8" style="margin-top: -10px">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="exportSuggests"
        >导出
        </el-button>
      </el-col>
      <!--隐藏搜索+刷新-->
      <right-toolbar
        :show-search.sync="showSearch"
        @queryTable="loadSuggests"
      />
    </el-row>

    <el-table
      ref="multipleTable"
      :data="zyComplaintSuggest"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />

      <el-table-column
        label="序号"
        width="120"
        type="index"
        :index="indexMethod"
        align="center"
      >
        <template slot-scope="scope">{{ scope.$index+1 }}</template>
      </el-table-column>

      <el-table-column
        label="类型"
        width="120"
      >

        <template slot-scope="scope">
          <el-tag v-if=" scope.row.complaintSuggestType === 'Suggest'" style="margin-left: 10px" type="success">建议</el-tag>
          <el-tag v-else-if="scope.row.complaintSuggestType === 'Complaint'" style="margin-left: 10px"   type="danger">投诉</el-tag>

        </template>
      </el-table-column>

      <el-table-column
        label="内容"
        width="120"
      >
        <template slot-scope="scope">{{ scope.row.complaintSuggestContent }}</template>
      </el-table-column>

      <el-table-column
        label="创建者名称"
        width="120"
      >
        <template slot-scope="scope">{{ scope.row.zyOwner.ownerRealName }}</template>
      </el-table-column>

      <el-table-column
        label="创建者电话"
        width="200"
      >
        <template slot-scope="scope">{{ scope.row.zyOwner.ownerPhoneNumber }}</template>
      </el-table-column>

      <el-table-column
        label="创建时间"
        width="200"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
      >
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>

      <!--      <el-table-column-->
      <!--        label="被投诉人"-->
      <!--        width="200">-->
      <!--        <template slot-scope="scope">{{ scope.row.zyOwner.ownerNickname}}</template>-->
      <!--      </el-table-column>-->

      <!--      <el-table-column-->
      <!--        label="图片"-->
      <!--        show-overflow-tooltip>-->
      <!--        <template slot-scope="scope">{{ scope.row.remark}}</template>-->
      <!--      </el-table-column>-->

      <el-table-column
        label="备注"
        width="200"
      >
        <template slot-scope="scope">{{ scope.row.remark }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteOne(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    添加或修改投诉建议 对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item  label="类型" prop="complaintSuggestType">
          <el-select   v-model="form.complaintSuggestType" placeholder="请选择类型(投诉、建议)" :disabled="flag">
            <el-option
              v-for="item in suggestOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="内容" prop="complaintSuggestContent">
          <el-input   v-model="form.complaintSuggestContent"  :min-height="192" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input      v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <div class="block" style="text-align:center">
      <el-pagination
        :current-page="this.current"
        :page-sizes="[ 3, 6, 9,12]"
        :page-size="this.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>

  import * as echarts from 'echarts';
  import {getToken} from "../../../utils/auth";
export default {
  name: 'Suggest',
  data() {
    return {

      dialogVisible:false,



      // 绑定状态
      suggestOption: [{
        value: 'Complaint',
        label: '投诉'
      }, {
        value: 'Suggest',
        label: '建议'
      }],

      open: false, // 对话框

      form: {}, // 对话框数据
      flag: false,
      title: '',

      showSearch: true,
      total: 0, // 共多少条
      current: 0, // 当前页数
      pageSize: 3, // 分页大小
      zyComplaintSuggest: [], // 表格数据

      formSuggests: {
        // communityId:"",
        // complaintSuggestId:"",
        complaintSuggestType: ''
        // complaintSuggestContent:"",
        // createBy:"",
        // create_time:"",
        // update_by:"",
        // update_time:"",
        // remark:"",
        // user_id:""
      }, // 对话框

      options: [{
        value: 'Complaint',
        label: '投诉'
      }, {
        value: 'Suggest',
        label: '建议'
      }],
      value: ''
    }
  },
  created() {
    this.loadSuggests(this.current, this.pageSize)
  },
  //页面 元素渲染完成后在触发
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option = {
      xAxis: {
        type: 'category',
        data: ['第一季度', '第二季度', '第三季度', '第四季度', ]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [],
          type: 'line'
        },
        {
          data: [],
          type: 'bar'
        }
      ]
    };

  this.axios.get("zyComplaintSuggest/quarter").then(res => {
      console.log(res)
      // 填空
      // option.xAxis.data = res.data.x
      option.series[0].data = res.data.data
      option.series[1].data = res.data.data
      // 数据准备完毕之后再set
      myChart.setOption(option);
    })

  },

  methods: {
    // 删除
    async handleDeleteOne(row) {
      this.$confirm('是否删除角色编号为"' + row.complaintSuggestId + '"的数据项？', '警告', {
        confirmButtonClass: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.axios.delete('/zyComplaintSuggest/' + row.complaintSuggestId).then(res => {
          if (res.data.data === 'ok') {
            this.$message.success('删除成功')
          } else {
            this.$message.error('删除失败')
          }

          const totalPage = Math.ceil((this.total - 1) / this.pageSize); // 总页数
          this.current = this.current > totalPage ? totalPage : this.current;
          this.current = this.current < 1 ? 1 : this.current  ;
          this.loadSuggests(this.current, this.pageSize)
        });

      })
    },
    //添加按钮
    handleAdd() {
      this.open = true;      //打开对话框
      this.flag = false;
      this.title = '新增';
      this.reset();          //重置 对话框
    },
    // 保存
    submitForm() {

      if (this.title === '新增') {
        this.axios({
          url: '/zyComplaintSuggest',
          method: 'post',
          data: this.form
        }).then(res => {
          if (res.data.data === 'ok') {
            this.$message.success('新增成功')
            location.reload();
          } else {
            this.$message.error('新增失败')
          }
        })


      }else if (this.title === '修改'){
        this.axios({
          url: '/zyComplaintSuggest/update',
          method: 'put',
          data: this.form
        }).then(res => {
          if (res.data.data === 'ok') {
            this.$message.success('修改成功')
          } else {
            this.$message.error('修改失败')
          }
        })
      }


      this.open = false;
      this.loadSuggests(this.current, this.pageSize)
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        complaintSuggestId: '',
        complaintSuggestType: '',
        complaintSuggestContent: '',
        createBy: '',
        createTime: '',
        updateBy: '',
        updateTime: '',
        remark: ''
      }
    },
    // 编辑
    handleUpdate(row) {
      this.reset();
      this.open = true;
      this.title='修改';
      this.flag = true;
      this.form = JSON.parse(JSON.stringify(row))
    },

    // 加载数据
    loadSuggests(current, pageSize, zyComplaintSuggest) {
      current = this.current;
      pageSize = this.pageSize;
      console.log(this.value);
      this.formSuggests.complaintSuggestType = this.value;
      zyComplaintSuggest = this.formSuggests;

      this.axios({
        url: '/zyComplaintSuggest?' + this.qs.stringify(zyComplaintSuggest),
        methods: 'get',
        params: {
          current: current,
          pageSize: pageSize
        }
      }).then(res => {
        this.zyComplaintSuggest = res.data.data.records;
        this.current = res.data.data.current;
        this.total = res.data.data.total;
        this.pageSize = res.data.data.size;
      })
    },

    // 导出
    exportSuggests() {
      console.log('这是导出');
      location.href = "http://localhost:8080/zyComplaintSuggest/export?"+"&Authorization=" +getToken();
    },
    // 清空下拉框 被选中的效果
    resetForm() {
      this.value = ''
    },

    // 全选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 完整版 点击切换页数
    handleSizeChange(size) {
      console.log(`每页 ${size} 条`);
      this.pageSize = size;
      this.loadSuggests(this.current, this.pageSize)
    },
    // 点击    翻页
    handleCurrentChange(current) {
      console.log(`当前页: ${current}`);
      this.current = current;
      this.loadSuggests(this.current, this.pageSize)
    },

    // 序号
    indexMethod(index) {
      index = (index + 1) + (this.current - 1) * this.pageSize;
      return index
    }
  }
}
</script>

<style scoped>

</style>
